<template>
	<view class="container">
		<view class="save">
			<view class="save_adres">
				<view class="shdz">收货地址</view>
				<view class="xian"></view>
				<view class="msgs">
					<view class="flex">
						<view class="name c-label">姓名</view>
						<input type="text" placeholder="请输入姓名" v-model="current.realName" class="content">
					</view>
					<view class="flex">
						<view class="c-label">联系电话</view>
						<input type="text" placeholder="请输入联系电话" v-model="current.phone" class="content">
					</view>
					<view class="flex">
						<view class="c-label">所在地区</view>
						<uni-data-picker :localdata="pickerParams.range" :map="{text:'name',value:'id'}"
							@change="bindPickerChange" style="flex: 1;">
							<input type="text" placeholder="请选择地区" v-model="current.regionName" class="c-region"
								disabled>
						</uni-data-picker>
					</view>
					<view class="flex">
						<view class="c-label">详细地址</view>
						<input type="text" placeholder="请输入详细地址" v-model="current.detail" class="content">
					</view>

				</view>
			</view>
		</view>

		<view class="mrbtn">
			<view class="btn_center" @click="mrSet">
				<view class="btn_box">
					<view class="imgbtn">
						<image :src="getImageSrc(mrBtn)" mode="" />
					</view>
					<view class="mr">
						设为默认
					</view>
				</view>
			</view>
		</view>

		<view class="savebtn" @click="saveMsg">
			<button class="btn_save">立即保存</button>
		</view>
	</view>
</template>

<script>
	import cascaderSelect from "@/components/mayh-cascader/mayh-cascader.vue";
	import $http from "@/ajax/http.js"
	export default {
		data() {
			return {
				// token
				token: wx.getStorageSync('shopToken'),
				mrBtn: true,
				// 定义图片路径  
				imagePaths: {
					true: '../../../static/image/shop/11.png',
					false: '../../../static/image/shop/10.png'
				},
				current: {
					realName: '',
					phone: '',
					regionName: '',
					address: {},
					detail: ''
				},
				pickerParams: {
					range: [],
				},
				customItem: '全部'
			}
		},
		onLoad() {
			this.treeMap();
		},
		methods: {
			// 获取图片路径的方法  
			getImageSrc(condition) {
				return this.imagePaths[condition];
			},

			mrSet() {
				this.mrBtn = !this.mrBtn
			},

			// 树形地图 
			treeMap() {
				$http.request({
					url: '/api/front/city/list'
				}, 2).then((res) => {
					// 这里最好拷贝一下
					this.pickerParams.range = res
					console.log(this.pickerParams.range)
				})
			},

			bindRegionChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
			},

			// 保存地址
			saveMsg() {
				const data = {
					address: {
						province: this.current.address.province,
						city: this.current.address.city,
						district: this.current.address.district
					},
					realName: this.current.realName,
					phone: this.current.phone,
					detail: this.current.detail,
					isDefault: this.mrBtn
				};

				// 添加输入验证逻辑，确保用户输入完整有效
				if (!this.validateInput(data)) {
					// 输入验证不通过，显示提示信息并返回
					wx.showModal({
						title: "提示",
						content: '请填写完整有效的地址信息',
						showCancel: false
					});
					return;
				}

				$http.request({
					header: {
						"Authori-zation": this.token
					},
					url: '/api/front/address/edit',
					data,
					method: 'POST'
				}, 2).then((res) => {
					console.log(res, "RES-------------");
					if (res.id !== '') {
						wx.showLoading({
							title: '正在保存地址',
							mask: true // 是否显示透明蒙层，防止用户继续操作
						});

						setTimeout(() => {
							wx.hideLoading(); // 隐藏加载提示
							wx.showToast({
								title: '您的地址已保存成功',
							});
							uni.navigateBack({
								delta: 1
							});
							uni.redirectTo({
								url: "/pages/shop/address/index"
							});
						}, 1500);
					} else {
						wx.showToast({
							title: res.message,
						});
					}
				}).catch((err) => {
					wx.showToast({
						title: "网络请求失败，请重试",
					});
				});
			},

			validateInput(data) {
				// 在这里添加输入验证逻辑，确保用户输入完整有效
				if (!data.address.province || !data.address.city || !data.address.district || !data.realName || !data
					.phone || !data.detail) {
					return false; // 输入不完整
				}
				return true; // 输入验证通过
			},




			//选择地址
			bindPickerChange({
				detail: {
					value
				}
			}) {
				console.log('value', value)

				// 写死索引
				this.current.address.province = value[0].text
				this.current.address.city = value[1].text
				// this.current.address.cityId = value[1].value
				this.current.address.district = value[2].text

				let str = ''

				for (let i = 0; i < value.length; i++) {
					if (i === 0) {
						str = `${value[i].text}`
					} else {
						str = `${str},${value[i].text}`
					}
				}
				this.current.regionName = str
				console.log(str, "str");
			},


		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		flex-direction: column;

		.save {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 674rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.save_adres {
				width: 608rpx;
				padding: 18upx;


				.shdz {
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					width: 100%;
				}

				.xian {
					position: relative;
					width: 608rpx;
					height: 1rpx;
					background-color: #eeeeee;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
				}

				.msgs {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;

					.flex {
						display: flex;
						line-height: 60rpx;


						.name {
							display: flex;
							justify-content: space-between;
						}

						input {
							margin-top: 8rpx;
						}

						.c-label {
							width: 140upx;
							display: flex;
							justify-content: space-between;
						}
					}





					.c-region {
						width: 100%;
					}

					.content {
						flex: 1;
					}
				}

				.xxmsg {
					display: flex;
					flex-direction: row;



					.grmsg {
						font-weight: 400;
						font-size: 26rpx;
						color: #808080;
						line-height: 40rpx;
						margin-top: 5rpx;
						margin-left: 30rpx;
					}

				}

			}
		}

		.mrbtn {
			width: 674rpx;
			height: 102rpx;
			margin-top: 12rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn_center {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 608rpx;

				.btn_box {
					width: 145rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.imgbtn {
						display: flex;
						flex-direction: row;

						image {
							width: 29rpx;
							height: 29rpx;
						}
					}

					.mr {
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						line-height: 40rpx;
					}
				}


			}
		}

		.savebtn {
			margin-top: 84rpx;
			width: 670rpx;
			height: 90rpx;

			.btn_save {
				// width: 670rpx;
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				font-weight: 400;
				font-size: 33rpx;
				color: #FFFFFF;
				background: linear-gradient(to right top, rgba(68, 194, 178, 1), rgba(3, 130, 140, 1));
				border-radius: 20rpx;
				box-shadow: 4rpx 6rpx 6rpx #c0c4c4;
			}
		}
	}
</style>